import React, { Component } from 'react'
import axios from "axios"
import { MyTabBar, MySearch, MyCarousel } from "../../components"
import { Toast, PullToRefresh, Flex, Card } from "antd-mobile"
import MyGrid from "./components/MyGrid"
import "./index.less"
import qs from "qs"
export default class index extends Component {
    constructor() {
        super();
        this.state = {
            swipers: [{ id: -1 }],
            refresh: true,
            icons: [{}],
            recommends: [
                { id: -1 }
            ]
        }
        //指定this指向
        this.fetchBannerData = this.fetchBannerData.bind(this);
        this.fetchAllCate = this.fetchAllCate.bind(this);
        this.fetchRecommend = this.fetchRecommend.bind(this);
    }
    render() {

        return (
            <div>
                <MySearch
                    enterSearch={this.enterSearch.bind(this)}
                />

                <div className="main">

                    {/* 轮播 */}
                    <MyCarousel
                        swipers={this.state.swipers}
                    />
                    {/* 九宫格 */}
                    <MyGrid
                        icons={this.state.icons}
                        enterList={this.enterList.bind(this)}
                    />
                    <PullToRefresh
                        refreshing={this.state.refresh}
                        onRefresh={this.refresh.bind(this)}
                    >
                        <div className="floor">
                            <div className="floor-head">
                                <h3 className="floor-head__title">
                                    热门商品
                                </h3>
                                <span className="more">
                                    <i className="iconfont icon-icon-test5"></i>
                                </span>
                            </div>
                            <Flex
                                wrap="wrap"
                                className="floor-main">
                                {
                                    this.state.recommends.map((el, index) => {
                                        return (
                                            <Flex.Item key={el.id}>
                                                <Card>
                                                    <Card.Body>
                                                        <div className="card-body">
                                                            <img src={el.pic} />
                                                            <p className="itemName">
                                                                {el.name}
                                                            </p>
                                                        </div>
                                                    </Card.Body>
                                                    <Card.Footer content={el.minPrice} extra={<div className="addCart">+</div>} />
                                                </Card>
                                            </Flex.Item>
                                        )
                                    })
                                }

                            </Flex>
                        </div>
                    </PullToRefresh>
                </div>
                <MyTabBar
                    active={0}
                />
            </div>
        )
    }
    componentDidMount() {
        this.fetchBannerData();
        this.fetchAllCate();
        this.fetchRecommend();
    }
    enterList(id) {
        /* 进入列表页 */
        alert(id)
    }
    enterSearch() {
        alert(1)
    }
    refresh() {
        //下拉刷新
        this.fetchRecommend2();
    }
    fetchRecommend2() {

        axios.post("/Godv/shop/goods/list", qs.stringify({
            orderBy: "addedDown",
            recommendStatus: 1 /* 推荐的商品 */
        })).then(res => {
            if (res.data.code === 0) {
                this.setState({
                    recommends: res.data.data,
                    refresh: false
                });

            }
        })
    }
    fetchRecommend() {
        //获取所有的推荐商品的数据
        Toast.loading("", 0);/* loding */
        axios.post("/Godv/shop/goods/list", qs.stringify({
            orderBy: "addedDown",
            recommendStatus: 1 /* 推荐的商品 */
        })).then(res => {
            if (res.data.code === 0) {
                this.setState({
                    recommends: res.data.data,
                    refresh: false
                });
                Toast.hide();
            }
        })

    }
    fetchAllCate() {
        axios.get("/Godv/shop/goods/category/all").then(res => {
            /* console.log(res) */
            if (res.data.code === 0) {
                this.setState({
                    icons: res.data.data
                })
            }
        })
    }
    async fetchBannerData() {

        let res = await axios.get("/Godv/banner/list");
        if (res.data.code === 0) {
            this.setState({
                swipers: res.data.data
            });
        }



    }
}
